<template>
    <div class="detailsBody row">
        <div class="col-xs-9 col-sm-9 col-md-9">
            <el-card class="box-card">
                <div style="display:flex;justify-content: space-around;">
                    <div class="information">
                        <div>
                            <i class="el-icon-bicycle" />
                            <span class="blueFont">出发时间：2020-06-15</span>
                        </div>
                        <div>
                            <i class="el-icon-add-location" />
                            <span class="blueFont">目的地：独库公路|南疆|新疆</span>
                        </div>
                        <div>
                            <i class="el-icon-user" />
                            <span class="blueFont">队伍人数：50人</span>
                        </div>
                    </div>
                    <div class="information">
                        <div>
                            <i class="el-icon-date" />
                            <span class="blueFont">旅游天数：15天</span>
                        </div>
                        <div>
                            <i class="el-icon-delete-location" />
                            <span class="blueFont">出发地：乌鲁木齐</span>
                        </div>
                    </div>
                    <div style="display:flex;">
                        <el-avatar
                            :size="80"
                            shape="square"
                            :src="author.src"
                            style="box-shadow: 1px 1px 1px 0 #0084ffbe;paddingLeft:0;"
                        ></el-avatar>
                        <div
                            style="font-weight: 700;font-size:15px;margin-left:10px;line-height: 250%;"
                        >
                            <div>
                                作者:
                                <span class="blueFont">{{author.name}}</span>
                            </div>
                            <el-button type="primary" plain size="mini" @click="gotoNews">
                                <i class="el-icon-message"></i> 联系作者
                            </el-button>
                        </div>
                    </div>
                </div>
                <div
                    style="background-color: #DCDFE6;position: relative;display: block;height: 1px;width: 100%;margin-bottom:10px;"
                ></div>
                <div class="plan">
                    <div>
                        <span class="blueFont">详细计划:</span>
                        <div style="margin:10px 30px">
                            <p>说走就走的旅行</p>
                            <p>本人80后大叔，刚刚结束北京自驾新疆万里自驾之行。</p>
                            <p>2020年7月18日北京自驾出发。（40天）</p>
                            <p>大致行程:</p>
                            <p>北京～河北～山西～陕西～宁夏～甘肃～青海～新疆～阿里～西藏～四川～北京（全程一万五千公里40天行程。）</p>
                            <p>1.寻找不磨叽的小伙伴，说走就走的旅行。</p>
                            <p>2.不要问具体行程，旅行从出发开始。</p>
                            <p>3.费用AA（费用构成平均一天）</p>
                            <p>租车每天100+油费60+吃50+住宿100＝310元（310×40＝12400元）</p>
                            <p>“穷家富路，预算2万剩下都是惊喜”</p>
                            <p>自驾经验:</p>
                            <p>1.北京自驾新疆</p>
                            <p>2.北京自驾呼伦贝尔</p>
                            <p>3.自驾海南</p>
                            <p>4.多次千里自驾</p>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3" style="padding:0">
            <el-card class="box-card">
                <el-divider content-position="left">
                    <span class="blueFont">我要报名</span>
                </el-divider>
                <el-form :model="bmForm" ref="bmForm" class="demo-ruleForm" :rules="rules">
                    <el-form-item label="手机号码" prop="phone" required>
                        <el-input type="age" v-model.number="bmForm.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remarks" required>
                        <el-input type="textarea" v-model="bmForm.remarks"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('bmForm')">立即报名</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        var phoneTesting = (rules, value, callback) => {
            if (!value) {
                return callback(new Error("手机号码不能为空"));
            }
            setTimeout(() => {
                if (!/^1[3456789]\d{9}$/.test(value)) {
                    callback(new Error("格式不正确"));
                } else {
                    callback();
                }
            }, 500);
        };
        return {
            author: {
                name: "用户xy973823", //用户名字
                user_id: "nb56781",
                brief: ` 踏上这片已近零下的冰雪大地。函馆的荣耀，就从这时开始说起。`,
                src:
                    "https://7465-test-wz0tn-1301797917.tcb.qcloud.la/ly/0de7c1dc0dbf5648511a11f9ff7bfafb%20(1).jpg?sign=fb5d17f1420bd7912a44115f46aae9f7&t=1588227692" //头像
            },
            bmForm: {
                phone: "",
                remarks: ""
            },
            rules: {
                phone: [
                    {
                        required: true,
                        validator: phoneTesting,
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            if (!this.$global.user) {
                this.$router.push({
                    path: "/dl",
                    query: { path: this.$route.path }
                });
            } else {
                this.$refs[formName].validate(valid => {
                    this.$message({
                        message: "请先进行实名注册",
                        type: "warning"
                    });
                    this.$router.push({ path: "/person/install" });
                });
            }
        },
        gotoNews() {
            this.$router.push({ path: "/person/news", query: this.author });
        }
    }
};
</script>
<style>
div.detailsBody {
    margin: 10px 50px;
}
div.detailsBody div.information div {
    margin: 10px;
}
div.detailsBody span.blueFont {
    font-weight: 700;
    color: rgb(64, 158, 255);
    font-size: 15px;
}

div.detailsBody .el-form-item {
    margin-bottom: 17px;
}
</style>